<template>
  <van-row class="goods-manage">
    <van-nav-bar title="历史订单" @click-left="onClickLeft" />
    <van-empty
      v-if="state.orderLiat.length <= 0"
      description="暂无历史订单"
      style="width: 100%; margin-top: 60%"
    />
    <div
      v-else
      style="
        width: 100%;
        margin-top: 10px;
        background: #f9f9f9;
        height: 91vh;
        box-sizing: border-box;
        padding: 16px 16px 0 16px;
        padding-bottom: 80px;
        overflow: scroll;
      "
    >
      <van-row class="health-counseling">
        <div
          style="
            background: #fff;
            width: 100%;
            padding: 16px;
            border-radius: 10px;
            margin-bottom: 10px;
          "
          v-for="order in state.orderLiat"
          :key="order.id"
        >
          <van-card desc="" :thumb="order.templateImgUrl">
            <template #title>
              <van-row>
                <van-col span="24" style="font-weight: bold; font-size: 14px">
                  <span>
                    {{ order.templateName }}
                  </span>
                </van-col>
              </van-row>
            </template>
            <template v-if="order.templateContent" #desc>
              <p
                style="
                  color: #969799;
                  height: 38px;
                  overflow: hidden;
                  display: -webkit-box; /* 必须设置display属性为-webkit-box */
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 显示省略号 */
                  -webkit-line-clamp: 2; /* 限制显示两行 */
                  -webkit-box-orient: vertical; /* 垂直方向上的换行 */
                "
              >
                <span>
                  {{ order.templateContent }}
                </span>
              </p>
            </template>
          </van-card>
          <div
            style="
              width: 100%;
              background: #f9f9f9;
              padding: 16px;
              border-radius: 10px;
              margin-top: 16px;
            "
          >
            <van-row>
              <van-col span="24" align="left">
                <span class="grey-text">总价：</span>
                <span>￥{{ order.totalPrice }}</span>
              </van-col>
            </van-row>
            <van-row style="padding: 10px 0">
              <van-col span="24" align="left">
                <span class="grey-text">状态：</span>
                <span v-if="order.miniSaleOrder.status == 0">待支付</span>
                <span v-if="order.miniSaleOrder.status == 1">已支付</span>
                <span v-if="order.miniSaleOrder.status == 2">已完成</span>
                <span v-if="order.miniSaleOrder.status == 3">申请退款</span>
                <span v-if="order.miniSaleOrder.status == 4">退款中</span>
                <span
                  v-if="
                    order.miniSaleOrder.status == 5 ||
                    order.miniSaleOrder.status == 6
                  "
                >
                  全部退款
                </span>
                <span v-if="order.miniSaleOrder.status == 7">退款失败</span>
              </van-col>
            </van-row>
            <van-row
              v-if="order.miniSaleOrder.status == 7"
              style="padding-bottom: 10px"
            >
              <van-col span="24" align="left">
                <span class="grey-text">失败原因：</span>
                <span>{{ order.miniSaleOrder.examineRemark }}</span>
              </van-col>
            </van-row>
            <van-row style="width: 100%">
              <van-col span="24" align="left">
                <span class="grey-text"> 联系电话：</span>
                <span>{{ order.userPhone }}</span>
              </van-col>
            </van-row>
            <van-row style="width: 100%; margin-top: 10px">
              <van-col span="24" align="left">
                <span class="grey-text">下单时间：</span>
                <span>
                  {{ $moment(order.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                </span>
              </van-col>
            </van-row>
          </div>
          <van-row justify="end" style="margin-top: 10px">
            <!-- <van-button
              plain
              type="primary"
              size="mini"
              style="
                margin-right: 10px;
                color: #666666;
                border: 1px solid #666666;
              "
              @click="contactCustomers(order)"
            >
              联系客户
            </van-button> -->
            <div v-if="order.miniSaleOrder.type == 1">
              <van-button
                v-if="
                  order.miniSaleOrder.status == 1 ||
                  order.miniSaleOrder.status == 2 ||
                  order.miniSaleOrder.status == 7
                "
                plain
                type="primary"
                size="mini"
                @click="refundEvent(order)"
              >
                退款
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-if="
                  order.miniSaleOrder.status == 1 ||
                  order.miniSaleOrder.status == 7
                "
                plain
                type="primary"
                size="mini"
                @click="refundEvent(order)"
              >
                退款
              </van-button>
            </div>
          </van-row>
        </div>
      </van-row>
    </div>
    <van-popup
      v-model:show="state.showBottom"
      position="bottom"
      style="line-height: 70px"
      :style="{ height: '20%' }"
    >
      <span style="font-size: 14px">联系电话：</span>
      <span style="font-size: 14px; font-weight: bold">
        {{ state.orderData.userPhone }}
      </span>
      <div style="padding: 0 16px; width: 100%">
        <van-button
          type="primary"
          size="large"
          style="
            color: #08d781;
            background: #08d781;
            border-radius: 22px;
            border: none;
          "
          @click="state.showBottom = false"
        >
          <span style="font-size: 16px; color: #fff"> 关闭 </span>
        </van-button>
      </div>
    </van-popup>
    <van-tabbar
      v-model="state.navActive"
      active-color="#08D781"
      @change="onChange"
    >
      <van-tabbar-item icon="wap-home-o"> 服务 </van-tabbar-item>
      <van-tabbar-item>
        <van-row>
          <SvgIcon
            width="30"
            height="30"
            name="educationRecords"
            color="#323233"
          ></SvgIcon>
        </van-row>
        宣教
      </van-tabbar-item>
      <van-tabbar-item icon="notes-o"> 历史订单 </van-tabbar-item>
    </van-tabbar>
  </van-row>
</template>
<script setup>
import { reactive, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { orderList, refund } from "@/api/order/order";
import { wechatAuthorize } from "@/utils/common";
import { showConfirmDialog } from "vant";
const router = useRouter();
const route = useRoute();
const state = reactive({
  wechatCode: route.query.code,
  navActive: 2,
  showBottom: false,
  orderLiat: [],
  searchData: {
    pageNum: 1,
    pageSize: 10,
  },
});
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const onChange = (val) => {
  if (val == 0) {
    router.push({ name: "home" });
  }
};
// 获取订单
const queryOrderList = () => {
  orderList(state.searchData).then((v) => {
    const data = v.data.records;
    state.orderLiat = data;
  });
};
queryOrderList();

// 联系客户
const contactCustomers = (val) => {
  state.showBottom = true;
  state.orderData = val;
  console.log(val);
};
const refundEvent = (val) => {
  showConfirmDialog({
    title: "提示",
    message: "你确定退款吗",
    cancelButtonText: "关闭",
  })
    .then(() => {
      refund({ id: val.orderId }).then((v) => {
        queryOrderList();
      });
    })
    .catch(() => {
      // on cancel
    });
};
// 微信授权
// onBeforeMount(() => {
//   wechatAuthorize(state.wechatCode).then((v) => {
//     queryOrderList();
//   });
// });
</script>
<style lang="scss" scoped>
.goods-manage {
  width: 100%;
  box-sizing: inherit;
  ::v-deep .van-submit-bar__button--danger {
    background: #4bbdbe;
  }
  .health-counseling {
    // background: #fff;
    border-radius: 10px;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
    & * {
      box-sizing: border-box;
    }
    button {
      padding: 0 10px;
    }
    .van-card {
      width: 100%;
      padding: 0;
      background: #fff;
      ::v-deep .van-card__thumb {
        width: 80px;
        height: 80px;
      }
      ::v-deep .van-card__content {
        text-align: left;
        min-height: inherit;
      }
    }
  }
  .van-nav-bar {
    width: 100%;
    background: transparent;

    ::v-deep .van-nav-bar__text {
      color: #4bbdbe;
    }
    ::v-deep .van-nav-bar__left {
      .van-badge__wrapper {
        color: #000;
      }
    }
  }
  .search {
    width: 100%;
    ::v-deep .van-search {
      width: 100%;
      background: transparent;
      .van-search__content {
        background: #fff;
        input {
          outline: none;
        }
      }
    }
  }
  .van-tabbar {
    padding: 10px 0;
    ::v-deep .van-icon {
      font-size: 28px;
    }
  }
  // * {
  //   box-sizing: border-box;
  //   overflow: hidden;
  // }
  .grey-text {
    color: #999999;
  }

  .van-popup {
    & * {
      box-sizing: border-box;
    }
  }
}
</style>
